import React from 'react'
import AssignmentsQuizzesStatusBox from './assignments-quizzes-status-box'
import { Divider,Row, Spin } from 'antd'
import AssignmentsStatusBox from './assignment-status-box'
import _ from 'lodash'
import TagSelectBox from '../../../../common/tag-select-box'
import { convertContent } from '../../../../../constant/lang-util'
import RefreshTool from '../../../../common/refresh-tool'
import {connect} from 'react-redux'
import {
  getAssignmentQuizOverview,
} from '../../../../../actions/program'
import { withRouter } from 'react-router-dom'
import { getStudentTagsByProgramId } from '../../../../../actions/student-tag'

class AssignmentsQuizBody extends React.Component {
  state = {
    isShowAssignmentStatus: true,
    id: -1,
    spinning: true,
    currentTag: 'all'
  }
  componentDidMount = () => {
    const {user} = this.props
    const {programId} = this.props.match.params
    this.props.getStudentTagsByProgramId(programId)
    if (user.id > 0) {
      this.props.getAssignmentQuizOverview(programId, user.id, `学员作业完成率概览`, () => {
        this.setState({spinning: false})
      })
    }
  }
  componentWillReceiveProps = nextProps => {
    const {user} = nextProps
    if (this.props.user === user) {
      return false
    }
    const {programId} = this.props.match.params
    this.props.getAssignmentQuizOverview(programId, user.id, `学员作业完成率概览`, () => {
      this.setState({spinning: false})
    })
  }
  refreshAssignmentQuizOverview = () => {
    const {user} = this.props
    const {programId} = this.props.match.params
    this.setState({spinning: true})
    this.props.getAssignmentQuizOverview(programId, user.id, `学员作业完成率概览`, () => {
      this.setState({spinning: false})
    },false)
  }

  toAssignmentDetail = id => {
    this.setState({id, isShowAssignmentStatus: false})
  }

  resetStatus = () => {
    this.setState({isShowAssignmentStatus: true, id: -1})
  }

  getCurrentAssignmentTitle = assignmentsQuizzesStatus => {
    return assignmentsQuizzesStatus.data.find(item => item.id === parseInt(this.state.id))['作业']
  }
  filter = assignmentsQuizzesStatus => {
    const {id} = this.state
    return _.groupBy(assignmentsQuizzesStatus.data, item => item.id)[id]
  }
  filterByTag = (assignmentsQuizzesStatus,currentTag) => {
    const {userTags} = this.props
    const tag = userTags.find(tag => tag.id === currentTag) || {}

    if (currentTag === 'all') {
      return assignmentsQuizzesStatus.data
    }
    return assignmentsQuizzesStatus.data.filter(ass => (ass.tag || '').includes(tag.name))
  }
  render () {
    const {isShowAssignmentStatus, spinning,currentTag} = this.state
    const {assignmentsQuizzesStatus, userTags} = this.props

    return <Spin size="large" spinning={spinning} tip='loading'>
      {isShowAssignmentStatus
        ? <div>
          <Row type='flex' justify='space-between'>
            <span>
              Tag: <TagSelectBox
              tags={userTags}
              handleChange={currentTag => this.setState({currentTag})}/>
            </span>
            <RefreshTool
              refresh={this.refreshAssignmentQuizOverview}
              refreshTime={assignmentsQuizzesStatus.refreshTime}
            />
          </Row>
          <Divider/>
          <AssignmentsStatusBox
            assignmentsQuizzesStatus={this.filterByTag(assignmentsQuizzesStatus,currentTag)}
            onChange={this.toAssignmentDetail}
          />
        </div>
        : <div>
          <a onClick={this.resetStatus}>
            {convertContent('返回')} | {this.getCurrentAssignmentTitle(assignmentsQuizzesStatus)}
          </a>
          <Divider/>
          <AssignmentsQuizzesStatusBox
            assignmentsQuizzesStatus={this.filter(assignmentsQuizzesStatus)}
          />
        </div>
      }
    </Spin>

  }
}

const mapStateToProps = ({assignmentsQuizzesStatus,userTags, user}) => ({
  assignmentsQuizzesStatus, user,userTags
})
const mapDispatchToProps = dispatch => ({
  getAssignmentQuizOverview: (programId, tutorId, type, callback,fromCache) => dispatch(getAssignmentQuizOverview(programId, tutorId, type, callback,fromCache)),
  getStudentTagsByProgramId: programId => dispatch(getStudentTagsByProgramId(programId))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AssignmentsQuizBody))
